<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
  </head>
  <body>
    <button id="btn">test</button>

    <script> // 宏任务  => 但它不进入宏队列, 是第一个执行的任务   初始化同步代码
      function fn1() {
        setTimeout(() => { // 宏任务
          console.log('timeout callback');
        }, 1000);
        // 如果启动定时器后的同步任务需要花的时间超过延迟的时间, 定时器就不能定时执行了
      }

      function fn2() {
        document.getElementById('btn').onclick = function () { // 宏任务
          console.log('dom event callback');
        };
      }

      function fn3() {
        $.get('./product.json', (data) => {  // 宏任务
          console.log('ajax callback', data);
        });
      }

      function fn4() {   // 同步任务
        console.log('同步任务');
        for (let index = 0; index < 100000; index++) {}
      }

      function fn5() {  
        Promise.resolve(1).then(() => { // 微任务
          console.log('Promise 回调1');
        });
        Promise.resolve(2).then(() => { // 微任务
          console.log('Promise 回调2');
        });
      }
    
      fn1();
      fn2();
      fn3();
      fn4();
      fn5();

      /* 
        一个宏任务 => 所有微任务

      script宏任务=> 所有微任务 (promise的成功回调)
      宏队列中的第一个宏任务 => 所有微任务
      */
    </script>
  </body>
</html>
